<template>
	<div class="charge-container">
		<template>
			<el-table :data="vipList"
				border
				style="width: 100%">
				<el-table-column align="center"
					label="产品图片"
					width="130">
					<!-- 插槽作用域 -->
					<template v-slot="{row}">
						<el-avatar shape="square"
							:size="80"
							fit="scale-down"
							:src="row.imageUrl"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="productName"
					align="center"
					label="产品名称">
				</el-table-column>
				<el-table-column prop="description"
					align="center"
					label="产品描述">
				</el-table-column>
				<el-table-column prop="price"
					align="center"
					label="价格(元)">
				</el-table-column>
				<el-table-column prop="inventory"
					align="center"
					label="库存">
				</el-table-column>
				<el-table-column label="操作"
					align="center">
					<template v-slot="{row}">
						<el-button type="primary"
							@click="pre_order(row)"
							icon="iconfont icon-vip3">充值</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>
<script>

	import * as api from "../../../../api"
	import { mapMutations } from "vuex";
	export default {
		methods: {
			...mapMutations(["SET_CURRENT_CHARGE_PRODUCT"]),
			pre_order(row) {
				//获得当前这一行的product_id 产品id
				// console.log(row);
				this.$confirm(`你正在购买${row.productName}, 是确认?${row.description}`, '购买提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'success'
				}).then(() => {
					//1.将当前购买的商品,存到vuex
					//给row添加一个属性,quantity
					row.quantity = 0;
					this.SET_CURRENT_CHARGE_PRODUCT(row)

					//2.页面跳转到pre_order页面
					this.$router.push({ name: "pre_order" })
					//3.展示商品的详情

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消购买'
					});
				});
			}
		},
		data() {
			return {
				vipList: []
			}
		},
		created() {
			api.getVipListApi("20210827165510715")
				.then(res => {
					console.log(res);
					if (res.data.state) {
						//获取成功
						this.vipList = res.data.data
					} else {
						this.$message.error("获取失败")
					}
				})
		}
	}
</script>
<style scoped lang="less">
.el-avatar {
	/deep/ img {
		width: 100%;
	}
	height: 30px !important;
	background-color: #fff;
}
.el-button--primary {
	background-color: #05a000;
}
</style>
